<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css">
    <script src="/static/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /* 焦点离开文本框 */
            $("#user_name").blur(function () {
                if ($("#user_name").val().length == 0) {
                    $("#user_name").css("border", "1px solid red");
                    $("#username_span").html("用户名不能为空");
                }
            });
            $("#user_name").focus(function () {
                $("#user_name").css("border", "1px solid white");
                $("#username_span").html("");
            });
            /* 焦点离开文本框 */
            $("#user_pwd").blur(function () {
                if ($("#user_pwd").val().length == 0) {
                    $("#user_pwd").css("border", "1px solid red");
                    $("#password_span").html("密码不能为空");

                }
            });
            $("#user_pwd").focus(function () {
                $("#user_pwd").css("border", "1px solid white");
                $("#password_span").html("");
            });
            /* 焦点离开文本框 */
            $("#re_user_pwd").blur(function () {
                if ($("#re_user_pwd").val().length == 0) {
                    $("#re_user_pwd").css("border", "1px solid red");
                    $("#repassword_span").html("确认密码不能为空");

                }
            });
            $("#re_user_pwd").focus(function () {
                $("#re_user_pwd").css("border", "1px solid white");
                $("#repassword_span").html("");
            });
            /* 焦点离开文本框 */
            $("#user_phone").blur(function () {
                if ($("#user_phone").val().length == 0) {
                    $("#user_phone").css("border", "1px solid red");
                    $("#tel_span").html("填写下手机号吧，方便我们联系您！");

                }
            });
            $("#user_phone").focus(function () {
                $("#user_phone").css("border", "1px solid white");
                $("#tel_span").html("");
            });
            /* 焦点离开文本框 */
            $("#user_email").blur(function () {
                if ($("#user_email").val().length == 0) {
                    $("#user_email").css("border", "1px solid red");
                    $("#email_span").html("填写邮箱，我们会定期向您推送活动内容！");

                }
            });
            $("#user_email").focus(function () {
                $("#user_email").css("border", "1px solid white");
                $("#email_span").html("");
            });
        })
        function submit1() {
            var num = 0;
            var str = "";
            $("input[type$='text']").each(function (n) {
                if ($(this).val() == "") {
                    num++;
                    str += $(this).attr("placeholder") + "!\r\n";
                }
            });
            $("input[type$='password']").each(function (n) {
                if ($(this).val() == "") {
                    num++;
                    str += $(this).attr("placeholder") + "!\r\n";
                }
            });
            if (num > 0) {
                alert(str);
                return false;
            } else {
                $.ajax({
                    url: "/register/",
                    type: "POST",
                    dataType: "json",
                    data:$("#form2").serialize(),
                    success: function (data){
                        console.log(data)
                        alert(data.msg)
                        if (data.msg == "注册成功"){
                            window.location = '/login/'
                        }
                    },

                });
            }
        }
    </script>
</head>
<body class="body2">

<!-- login -->
<div class="top center">
    <div class="logo center">
        <br/>
        <a href="./index.html" target="_blank"><img src="/static/image/logo.png" alt="" style="height: 5rem;"></a>
    </div>
</div>
<form class="form2" method="POST" id="form2">
    <br/>
    <div class="regist">
        <div class="regist_center">
            <div class="regist_top">
                <br/>
                <div class="left fl">会员注册</div>
                <div class="right fr">您已经是我们的会员？<a href="/login/" target="_self">前往登录</a></div>
                <div class="clear"></div>
                <div class="xian center"></div>
            </div>
            <div class="regist_main center">
                <div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input class="shurukuang"
                                                                                     type="text" name="user_name"
                                                                                     placeholder="请输入你的用户名"
                                                                                     id="user_name"><span
                        id="username_span"></span></div>
                <div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input
                        class="shurukuang" type="password" name="user_pwd" placeholder="请输入你的密码"
                        id="user_pwd"/><span id="password_span"></span></div>

                <div class="username">确认密码:&nbsp;&nbsp;<input class="shurukuang" type="password"
                                                              name="re_user_pwd" placeholder="请确认你的密码"
                                                              id="re_user_pwd"/><span
                        id="repassword_span"></span></div>
                <div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;<input class="shurukuang"
                                                                                     type="text" name="user_phone"
                                                                                     placeholder="请填写正确的手机号"
                                                                                     id="user_phone"/><span
                        id="tel_span"></span>
                </div>
                <div class="username">邮箱地址:&nbsp;&nbsp;<input class="shurukuang" type="text" name="user_email"
                                                              placeholder="请填写正确的邮箱地址" id="user_email"><span
                        id="email_span"></span></div>

                <div class="username">
                    <div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="yanzhengma"
                                                                                        type="text" name="user_yzm"
                                                                                        placeholder="请输入验证码"/></div>
                    <div class="right fl"><img src="/static/image/yanzhengma.jpg"></div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="regist_submit">
                <input class="submit" type="button" onclick="submit1();" value="立即注册">
            </div>

        </div>
    </div>
</form>
<footer>
    <div class="copyright">简体 | 繁体 | English | 常见问题</div>
    <div class="copyright">鲜焙蛋糕版权所有-京ICP备10046444-<img src="/static/image/ghs.png"
                                                       alt="">京公网安备11010802020134号-京ICP证110507号
    </div>

</footer>

</body>
</html>
